<template>
  <px-dialog v-model="visible" title="上传附件" @close="cancel">
    <div>
      <FileUpload
        fileType="edit"
        :fileData="{ moduleName: 'machine' }"
        :fileList="fileList"
        style="margin-bottom: 18px"
        @changeFileList="changeFileList"
        @saveFileStatus="saveFileStatus"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="cancel">取消</px-button>
        <px-button type="primary" :disabled="fileStatusFlag" @click="confirmUpload">确定</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<script setup>
import { computed, ref, reactive } from "vue";
import { UploadFilled } from "@px-ui/icons-vue";
import { PxMessage } from "px-ui";
import FileUpload from "@/components/Upload/FileUpload.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  limit: {
    type: Number,
    default: 1
  },
  folderData: {
    type: Object,
    default: () => {}
  },
  actionUrl: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["update:visible", "uploadAction"]);

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});
const queryParams = reactive({
  year: ""
});
const formRef = ref();

const fileList = ref([]);
const fileStatusFlag = ref(false);

const ACCEPTED_EXTENSIONS = ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf"];

const changeFileList = async val => {
  fileList.value = val;
};
// 文件是否上传完，是否可以保存
const saveFileStatus = val => {
  fileStatusFlag.value = val;
};

/**
 * 提交请求
 * 处理上传逻辑
 */
const confirmUpload = async () => {
  if (fileList.value.length === 0) {
    return PxMessage.error("请选择要上传的文件");
  }
  emits("uploadAction", fileList.value);
};

const cancel = () => {
  fileList.value = [];
  emits("update:visible", false);
};

defineExpose({
  cancel
});
</script>

<style lang="scss" scoped>
.upload-demo {
  width: 100%;
}

p {
  line-height: 36px;

  .label {
    display: inline-block;
    width: 80px;
    color: #000;
    text-align: right;
  }
}
</style>
